<!--
*角色详情页面
* -->
<!DOCTYPE html>
<html>
<head>
    <title>ManaGement PlatForm</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta name="_csrf" content="2a049f84-561c-44bf-ae25-f24fbf78b313">
    <meta name="_csrf_header" content="X-CSRF-TOKEN">

    <script src="/wedding_admin/js/common.js"></script>
    <script src="/wedding_admin/js/jquery.min.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.all.min.js"></script>
    <script src="/wedding_admin/js/jszip.min.js"></script>
    <script src="/wedding_admin/js/um/respond.min.js"></script>
    <script src="/wedding_admin/js/um/es5-shim.min.js"></script>

    <script src="/wedding_admin/js/kendo/kendo.culture.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.messages.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.hap.js?v=20180330"></script>
    <script src="/wedding_admin/js/um/moment.min.js"></script>
    <script src="/wedding_admin/js/um/daterangepicker.js"></script>
    <script src="/wedding_admin/js/layui/lay/dest/layui.all.js"></script>

    <script src="/wedding_admin/js/vue_table/vue.min.js"></script>
    <script src="/wedding_admin/js/vue_table/vue-validator.min.js"></script>

    <script src="/wedding_admin/js/treegrid/tree.table.js"></script>
    <script src="/wedding_admin/js/treegrid/jquery.treegrid.extension.js"></script>
    <script src="/wedding_admin/js/treegrid/jquery.treegrid.min.js"></script>
    <script src="/wedding_admin/js/ztree/jquery.ztree.all.min.js"></script>

    <link href="/wedding_admin/statics/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/wedding_admin/statics/css/simple-line-icons.min.css" rel="stylesheet" type="text/css">
    <link href="/wedding_admin/css/ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.hap.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/daterangepicker.css" rel="stylesheet">


</head>
<style type="text/css">
    #retryWindow {
        margin-top: 10px;
    }

    #retryWindow label {
        line-height: 30px;
        text-align: right;
        box-sizing: border-box;
    }

    #retryWindow div {
        box-sizing: border-box;
    }

    .col-sm-10 {
        width: 40%;
    }

    /*input -*/
    .form-control {
        display: inline;
        width: 90%;
    }
</style>


<body>

<script type="text/javascript">

</script>
<div id="rrapp" v-cloak>
    <div id="content-container">
        <div id="page-content">
            <form class="form-horizontal">
                <input type="hidden" id="instId" name="instId">
                <div id="tab" class="col-sm-12">
                    <ul class="nav nav-tabs" id="mytab">
                        <li class="active"><a href="#statusInfo" data-toggle="tab">角色所属用户</a></li>
                    </ul>
                    <div id="tabContent" class="tab-content">
                        <div id="statusInfo" class="tab-pane fade in active" style="margin-top: 10px;">


                            <div class="panel panel-default">
                                <form class="form-horizontal">
                                    <div class="form-group">
                                        <div class="form-group"></div>
                                        <input type="hidden" id="role_id" name="role_id"/>
                                        <div class="form-group">
                                            <div class="col-sm-1 control-label">角色名称</div>
                                            <div class="col-sm-4">

                                                <input type="text" class="form-control"
                                                       v-model="role.roleName" readonly="readonly" placeholder="角色名称"/>

                                            </div>

                                            <div class="col-sm-1 control-label">备注</div>
                                            <div class="col-sm-4">
                                                <input type="text" class="form-control"
                                                       v-model="role.remark" readonly="readonly" placeholder="备注"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-1"></div>
                                            <input type="button" class="btn btn-success" @click="add"
                                                   value="添加用户" style="width: 80px"/>

                                            <input type="button" class="btn btn-danger" @click="detele"
                                                   value="删除用户" style="width: 80px"/>
                                        </div>


                                        <div class="form-group">
                                            <div class="col-sm-1 control-label">所属用户</div>
                                            <div class="col-sm-18">
                                                <div id="grid"></div>
                                            </div>
                                        </div>


                                    </div>

                                </form>

                            </div>
                        </div>


                    </div>
                </div>
            </form>
        </div>
    </div>


    <div id="infoWin"></div>

</div>

<script>


    var vm = new Vue({
        el: '#rrapp',
        data: {

            roleList: {},
            role: {

                parentId: 0,
                deptId: null,
                deptName: null,
            }

        },
        mounted() {


            //查询用户信息
            this.getinfo()

        },
        methods: {

            getinfo: function () {

                $.get("/wedding_admin/sys/sysrole/info/" + this.GetParam("role_id"), function (r) {
                    vm.role = r.role;

                });
            },
            add: function () {
                $("#infoWin").kendoWindow({
                    actions: ["Maximize", "Minimize", "Close"],
                    draggable: true,
                    height: "85%",
                    width: "90%",
                    content: "/wedding_admin/sys/um/sys_role_list_infouser_add.html?role_id="+this.GetParam("role_id"),//?instId=" + data.instId + "&isedit=1" + "&status=" + data.status
                    iframe: true,
                    modal: true,
                    close: function () {
                        $("#infoWin").empty();

                        // $('#grid').data('kendoGrid').dataSource.query();
                    }
                })

                var win = $("#infoWin").data("kendoWindow");

                win.center().open();

                // e.preventDefault();
                vm.title = null
            },
            detele: function () {

                var grid = $("#grid").data("kendoGrid");
                var checked = grid.selectedDataItems();
                var userList = new Array();
                for (var i = 0; i < checked.length; i++) {
                    userList.push(checked[i].id)
                }
                if (grid.selectedDataItems().length == 0) {
                    alert("请选择一条记录");
                    return;
                }

                var rs = confirm('确定要删除选中的记录？');
                if (rs) {

                    $.ajax({
                        type: "POST",
                        url: "/wedding_admin/sys/sysrole/roleuserdelete",
                        data: '{"userIDs":'+JSON.stringify(userList)+',"roleid":"'+this.GetParam("role_id")+'"}',
                        contentType: 'application/json;charset=utf-8',//传递数据格式为json
                        dataType: 'json',//返回数据格式为json
                        success: function (r) {
                            if (r.code === 0) {
                                alert('操作成功');
                                var grid = $("#grid").data("kendoGrid");//重新读取数据库写法  刷新页面·
                                grid.dataSource.read();

                            } else {
                                alert(r.msg);
                            }
                        }
                    });

                }
            }

            ,
            GetParam: function (paraName) {
                var url = document.location.toString();
                var arrObj = url.split("?");
                if (arrObj.length > 1) {
                    var arrPara = arrObj[1].split("&");
                    var arr;
                    for (var i = 0; i < arrPara.length; i++) {
                        arr = arrPara[i].split("=");
                        if (arr != null && arr[0] == paraName) {
                            return arr[1];
                        }
                    }
                    return "";
                } else {
                    return "";
                }
            },

            validator: function () {
                //校验参数
                /*  if (isBlank(vm.user.lastName)) {
                      alert("用户名称不能为空");
                      return true;
                  }*/


            }
        }
    });

    function GetParam(paraName) {
        var url = document.location.toString();
        var arrObj = url.split("?");
        if (arrObj.length > 1) {
            var arrPara = arrObj[1].split("&");
            var arr;
            for (var i = 0; i < arrPara.length; i++) {
                arr = arrPara[i].split("=");
                if (arr != null && arr[0] == paraName) {
                    return arr[1];
                }
            }
            return "";
        } else {
            return "";
        }
    }

    //--------------
    var crudServiceBaseUrl = "/wedding_admin/sys/sysrole/roleuserlist/" + GetParam("role_id"),
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: crudServiceBaseUrl,
                    type: "POST",
                    dataType: "json"
                },
                parameterMap: function (options, type) {

                    if (type !== "read" && options.page) {

                        var datas = Hap.prepareSubmitParameter(options, type);

                        return kendo.stringify(datas);
                    } else if (type === "read") {

                        return {//分页参数
                            limit: options.pageSize,  //当前页码
                            page: options.page  //每页显示记录数

                        }
                    }
                }
            },
            batch: true,
            serverPaging: true,
            pageSize: 10,
            schema: {
                data: function (data) {

                        return data.page.list;


                },
                total: function (data) {

                    if (data.page.totalCount>0){
                    return data.page.totalCount;
                    }else {
                        return 0
                    }


                },
                model: {
                    id: "userId",
                    fields: {
                        create_time: {type: "date", format: "{0:yyyy-MM-dd HH:mm:ss}"}
                    }
                }
            }


        });


    var grid = $("#grid").kendoGrid({
        dataSource: dataSource,
        dataBound: function () {

            if (parent.autoResizeIframe) {
                parent.autoResizeIframe('HSP_SERVICE_INSTANCE')
            }
        },
        resizable: true,
        scrollable: true,
        navigatable: false,
        editable: false,
        selectable: 'multiple,rowbox',
        pageable: {
            pageSizes: [10, 20, 50, 100, 200, 500],
            refresh: true,
            buttonCount: 5
        },
        columns: [
            {
                field: "userId",
                title: '用户ID',
                width: 80,

                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "lastName",
                title: '用户名称',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "workCode",
                title: '编号',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "deptName",
                title: '所在部门',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "mobile",
                title: '手机号码',
                width: 80,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            },
            {
                field: "email",
                title: '用户邮箱',
                width: 120,
                headerAttributes: {
                    "class": "table-header-cell",
                    style: "text-align: center"
                },
                attributes: {
                    style: "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: center"
                }
            }

        ]
    }).data("kendoGrid");


    var container = $("#backupWindow");
    kendo.init(container);
    container.kendoValidator({
        invalidMessageType: "tooltip"
    });


    Hap.autoResizeGrid("#grid");


</script>
</body>
</html>
